<template>
	<view class="page-container">
		<view class="table-view-group">
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">邮箱</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="email" placeholder="请输入邮箱号码" />
					</view>
					<view class="table-cell-block__fd" :hidden="!email">
						<text class="iconfont control-clear-icon" @click="resetEmail">&#xe688;</text>
					</view>
				</view>
			</view>
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">图形验证码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="imgCode" placeholder="图形验证码" />
					</view>
					<view class="table-cell-block__fd">
						<image :src="imgCodeInfo.pic" mode="scaleToFill" style=" width: 120rpx; height: 60rpx;" @click="getImgCode"></image>
					</view>
				</view>
			</view>
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">邮箱验证码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="code" placeholder="请输入验证码" />
					</view>
					<view class="table-cell-block__fd">
						<view class="msg-code__txt" v-if="isSend">{{countDown}}秒后重新发送</view>
						<view class="msg-code__send" v-else @click="sendCode">获取动态密码</view>
					</view>
				</view>
			</view>
		</view>
		<button type="default" :class="['save-btn-block', isCheckEmpty ? '' : 'disabled']" :disabled="!isCheckEmpty" @click="clickMe">绑定</button>
	</view>
</template>

<script>
	import {check_phone, check_email} from '@/utils/utils.js'
	export default {
		data() {
			return {
				email: '',
				code: '',
				imgCode: '',
				right_code: '',
				isSend: false,
				countDown: 119,
				imgCodeInfo:{},
			}
		},
		computed: {
			isCheckEmpty(){
				return this.email && this.code && this.imgCode
			}
		},
		onLoad() {
			this.getImgCode();
		},
		methods: {
			resetEmail(){
				this.email = '';
			},
			// 获取验证码
			async getImgCode(){
				let getImgRes;
				let params = {
					method: "api/v2/common/get_code_image"
				}
				getImgRes = await this.$http(params);
				this.imgCodeInfo = getImgRes.data;
			},
			//绑定
			async clickMe(){
				if( !check_email(this.email) ){
					return uni.showToast({
						title: '邮箱格式错误',
						icon: 'none'
					});
				}
				if( this.imgCode.length != 4 ){
					return uni.showToast({
						title: '验证码错误',
						icon: 'none'
					});
				}
				if( this.code.length != 4 || isNaN(this.code) ){
					return uni.showToast({
						title: '动态码错误',
						icon: 'none'
					});
				}
				let params = {
					method: 'api/v2/member/info/bind',
					user:this.email,
					code: this.imgCode,
					msg_code: this.code,
					captcha_key:this.imgCodeInfo.key,
					msgtype:'bind_third_new'
				}
				let res = await this.$http(params) 
				if( res.status ){
					uni.showToast({
						title: '绑定成功',
						icon: 'none'
					});
					setTimeout(()=>{
						uni.navigateBack({})
					}, 1500)
				}else{
					uni.showToast({
						title: res.msg
					});
				}
			},
			
			// 发送验证码
			async sendCode(){
				if( !this.email ){
					return uni.showToast({
						title:'请输入邮箱',
						icon:'none'
					})
				}
				if( !check_email(this.email) ){
					return uni.showToast({
						title: '邮箱格式错误',
						icon: 'none'
					});
				}
				let timer;
				uni.showLoading({
					title:'发送中',
					mask:true
				})
				let params = {
					method: 'api/v2/dynamic/code',
					'receiver':this.email,
					'is_email':1,
					'msgtype':'bind_third_new'
				}
				let res = await this.$http(params)
				uni.hideLoading()
				if( res.status ){
					this.isSend = true;
					
					uni.showToast({
						title: res.msg,
						icon:'none'
					});
					timer = setInterval(() => {
						if(this.countDown > 1){
							this.countDown--
						}else{
							this.countDown = 119;
							this.isSend = false;
							clearInterval(timer)
						}
					}, 1000)
					
					this.right_code = res.code
				}else{
					uni.showToast({
						title: res.msg,
						icon:'none'
					});
				}
				
			}
			
		}
	}
</script>

<style lang="scss">
	.page-container{
		padding: 24rpx;
	}
	.table-view-group{
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color;
	}
	.table-cell-bar{
		padding: 0 20rpx;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 20rpx;
			left: 20rpx;
			bottom: 0;
			height: 1px;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: $uni-border-color;
		}
		&:last-child:after{
			display: none;
		}
	}
	.table-cell-block{
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		&__hd{
			flex: 0 0 auto;
			width: 180rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $uni-font-size-base;
		}
		&__bd{
			flex: 1 1 auto;
		}
		&__fd{
			height: 48rpx;
			line-height: 48rpx;
			flex: 0 0 auto;
			.iconfont{
				display: inline-block;
				vertical-align: top;
				margin-left: 12rpx;
			}
		}
	}
	.save-btn-block{
		color: $uni-text-color-inverse;
		padding: 4rpx 0;
		text-align: center;
		margin-top: 40rpx;
		font-size: $uni-font-size-lg;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-primary;
		&:after{
			display: none;
		}
		&.disabled{
			color: $uni-text-color-inverse;
			background-color: #bdefd6;
		}
	}
	.item-input{
		height: 48rpx;
		line-height: 48rpx;
		margin-right: 30rpx;
		font-size: $uni-font-size-base;
	}
	.msg-code__send{
		color: $uni-color-primary;
		margin-left: 40rpx;
		font-size: $uni-font-size-sm;
	}
	.msg-code__txt{
		color: $uni-text-color-disable;
		margin-left: 40rpx;
		font-size: $uni-font-size-sm;
		font-family: Arial, Helvetica, sans-serif;
	}
</style>
